import React, { useState,  useEffect } from 'react';
import { Tabs, WhiteSpace, List, InputItem, Button, WingBlank } from 'antd-mobile';
import { createForm } from 'rc-form';

import './login.scss';
import translate from "@/assets/svg/turn.svg"

import { PostParentLogin, PostTutorLogin } from "@/api/login.js"; // login api
import { R } from "@/assets/js/dict";

function Login (props) {
    let [role, setRole] = useState(props.match.params.role);

    function turn () {
        if (role === 'TUTOR') {
            setRole("PARENT");
            props.history.push({
                pathname: '/login/PARENT'
            });
            sessionStorage.setItem('roleVal', "PARENT")

        } else if (role === 'PARENT') {
            setRole("TUTOR");
            props.history.push({
                pathname: '/login/TUTOR'
            });
            sessionStorage.setItem('roleVal', "TUTOR")
        } else {
            console.error("未定义的值：" + role);
        }

    }

    // let [username] = props
    console.log('props ------->>', props)
    // 登录
    function handleLogin () {
        let postData = {};
        postData = props.form.getFieldsValue()
        postData.role = props.match.params.role;
        console.log(sessionStorage.getItem('roleVal'))
        if (role === 'TUTOR') {
            PostTutorLogin(postData).then(res => {
                if (res.code == '000000') {
                    let data = R.getData(res);
                    sessionStorage.setItem('roleVal', data.type);
                    sessionStorage.setItem('userInfo', JSON.stringify(data));
                    // 跳转首页
                    props.history.push('/mainTutor')
                }
            }).catch((err) => {
                console.log('err ----->>>', err)
            })
        } else if (role === 'PARENT') {
            PostParentLogin(postData).then(res => {
                if (res.code == '000000') {
                    let data = R.getData(res);
                    sessionStorage.setItem('roleVal', data.type);
                    sessionStorage.setItem('userInfo', JSON.stringify(data));
                    // 跳转首页
                    props.history.push('/main')
                }
            }).catch((err) => {
                console.log('err ----->>>', err)
            })
        }
    };


    useEffect(()=>{
        sessionStorage.setItem('roleVal', role);
        
    },[])
    const { getFieldProps } = props.form;


    return (
        <div className="login">
            <div className="login-bg"></div>
            <div className="login-form-box">
                <h1>{role === 'TUTOR' ? '家教登录' : '家长登录'} <Button onClick={turn}  inline icon={<img src={translate} alt="" />}></Button></h1>
                <div>
                    <InputItem
                        {...getFieldProps('username')}
                        placeholder="请输入姓名或手机号"
                        name="username"
                        onKeyUp={(e)=>{
                            if(e.keyCode === 13){
                                handleLogin()
                            }
                        }}
                    >用户名</InputItem>
                </div>
                <div>
                    <InputItem
                        type="password"
                        name="password"
                        placeholder="请输入密码"
                        onKeyUp={(e)=>{
                            if(e.keyCode === 13){
                                handleLogin()
                            }
                        }}
                        {...getFieldProps('password')}
                    >密码</InputItem>
                </div>
                <div>
                    <Button type="primary" onClick={() => { handleLogin() }}
                        onKeyUp={(e)=>{
                            if(e.keyCode === 13){
                                handleLogin()
                            }
                        }}>登录</Button>
                </div>
                <div>
                    <span style={{ float: 'left' }} onClick={() => {
                        if (role === 'PARENT') {
                            props.history.push('/signUp')
                        } else if (role === 'TUTOR') {
                            props.history.push('/signUpTutor')
                        }
                    }}>还未有账户?</span>

                    <span style={{ float: 'right' }} onClick={() => {
                        props.history.push("/forgetPassword");
                    }}>忘记密码?</span>
                </div>

            </div>
        </div>
    );
}

Login = createForm()(Login);

export default Login;